<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<title>分类</title>
	<meta name="keywords" content="">
	<meta name="description" content="">
	<script src="js/rem.js"></script>
	<script src="js/jquery.min.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="css/base.css"/>
	<link rel="stylesheet" type="text/css" href="css/page.css"/>
	<link rel="stylesheet" type="text/css" href="css/all.css"/>
	<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
	<link rel="stylesheet" type="text/css" href="css/loaders.min.css"/>
	<link rel="stylesheet" type="text/css" href="css/loading.css"/>
	<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
	<script src="js/vue-2.4.0.js" type="text/javascript"></script>
	<script src="js/axios_v0.12.0.js"></script>
	<script type="text/javascript">
		$(window).load(function(){
			$(".loading").addClass("loader-chanage")
			$(".loading").fadeOut(300)
		})
	</script>
</head>
<!--loading页开始-->
<div class="loading">
	<div class="loader">
		<div class="loader-inner pacman">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>
</div>
<!--loading页结束-->
<body>
<!--header star-->
<header class="mui-bar mui-bar-nav" id="header">
	<a class="btn" href="javascript:history.go(-1)">
		<i class="iconfont icon-fanhui"></i>
	</a>
	<div class="top-sch-box flex-col">
		<div class="centerflex">
			<i class="fdj iconfont icon-sousuo"></i>
			<input type="text" name="" id="" value="" class="sch-txt" placeholder="输入您要搜索的商品" />
		</div>
	</div>
	<a class="btn" href="#">
		<i class="iconfont icon-erweima"></i>
	</a>
</header>
<!--header end-->

<div class="warp clearfloat" >
	<!--cation star-->
	<div class="cations clearfloat" id="jjj">
		<div v-for="(item, index) in categories">
		<div class="list clearfloat fl" v-if="item.parentId == 0">
<!--			<a :href=" 'http://127.0.0.1:8090/list.html?typeid=' + (item.id) +'&typename='+ (item.name)">-->
			<a :href=" 'http://127.0.0.1:8090/list.html?typeid='+ (item.id) +'&typename='+ (item.name)">
				<p class="tit over box-s">{{item.name}}</p>
				<div class="tu">
					<img src="upload/18.jpg"/>
				</div>
			</a>
		</div>
		</div>
	</div>
</div>

		<!--footer star-->
		<footer class="page-footer fixed-footer" id="footer">
			<ul>
				<li>
					<a href="index.html">
						<i class="iconfont icon-shouye"></i>
						<p>首页</p>
					</a>
				</li>
				<li class="active">
					<a href="cation.html">
						<i class="iconfont icon-icon04"></i>
						<p>分类</p>
					</a>
				</li>
				<li>
					<a href="shopcar.html">
						<i class="iconfont icon-gouwuche"></i>
						<p>购物车</p>
					</a>
				</li>
				<li>
					<a href="login.html">
						<i class="iconfont icon-yonghuming"></i>
						<p>我的</p>
					</a>
				</li>
			</ul>
		</footer>
		<!--footer end-->
</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
<script src="js/mui.min.js"></script>
<script src="js/others.js"></script>
<script type="text/javascript" src="js/hmt.js" ></script>
<script src="slick/slick.js" type="text/javascript" ></script>
<!--插件-->
<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/swiper.jquery.min.js"></script>
<script type="text/javascript">
	Vue.prototype.$axios=axios;
	
	var vm = new Vue({
		el: '#jjj',
		data: {
			categories: []
		},
		created:function () {   //自动触发写入的函数
			// this.getCategories();
			this.$axios({
				method:'get',//发送请求的方式
				url:'http://127.0.0.1:8090/products/findAllCategory',//请求的地址
			}).then(function (response) {
				if(response.data.state == 1000){
					vm.categories = response.data.data;
					console.log(vm.categories);
				}
			});
		},
		methods: {
			getCategories(){
				// this.$axios({
				// 	method:'get',//发送请求的方式
				// 	url:'http://127.0.0.1:8090/products/findAllCategory',//请求的地址
				// }).then(function (response) {
				// 	if(response.data.state == 1000){
				// 		this.categories = response.data.data;
				// 		console.log(this.categories);
				// 	}
				// })
			}
		}
	});
</script>
</html>
